<template>
  <t-menu :collapsed="store.isCollapsed && store.showType === 'aside'" class="container" default-value="item2" theme="dark"
          width="100%">
    <template #logo>
      <div class="logo_container">
        <img :src="store.isCollapsed && store.showType === 'aside' ? lo_collapsed : logo_expanded" alt="logo" class="logo" />
      </div>
    </template>
    <div class="content">

      <t-menu-group title="数据">
          <t-menu-item value="1-1" to="/admin">
            <template #icon>
              <ChartComboIcon />
            </template>
            数据面板
          </t-menu-item>
      </t-menu-group>

      <t-menu-group title="管理">
        <t-submenu title="授权管理" value="2-1">
          <template #icon>
            <Dashboard1Icon />
          </template>
            <t-menu-item value="2-1-1" to="/admin/program">应用管理</t-menu-item>
            <t-menu-item value="2-1-2" to="/admin/authorization">授权管理</t-menu-item>
            <t-menu-item value="2-1-3" to="/admin/piracy">盗版记录</t-menu-item>
        </t-submenu>

        <t-submenu title="订单管理" value="2-2">
          <template #icon>
            <WalletIcon />
          </template>
            <t-menu-item value="2-2-1" to="/admin/order">查看订单</t-menu-item>
        </t-submenu>

        <t-submenu title="工单系统" value="2-3">
          <template #icon>
            <StickyNoteIcon />
          </template>
            <t-menu-item value="2-3-1">查看工单</t-menu-item>
        </t-submenu>

        <t-submenu title="用户系统" value="2-4">
          <template #icon>
            <UsergroupIcon />
          </template>
            <t-menu-item value="2-4-1" to="/admin/user">用户管理</t-menu-item>
        </t-submenu>

        <t-submenu title="公告管理" value="2-5">
          <template #icon>
            <ChatPollIcon />
          </template>
            <t-menu-item value="2-5-1">平台公告</t-menu-item>
            <t-menu-item value="2-5-2">市场公告</t-menu-item>
            <t-menu-item value="2-5-3">用户通知</t-menu-item>
        </t-submenu>

        <t-submenu title="回收站" value="2-6">
          <template #icon>
            <ClearIcon />
          </template>
            <t-menu-item value="2-6-1" to="/admin/recycle/program">授权应用</t-menu-item>
            <t-menu-item value="2-6-2" to="/admin/recycle/authorization">正版授权</t-menu-item>
            <t-menu-item value="2-6-3" to="/admin/recycle/order">支付订单</t-menu-item>
            <t-menu-item value="2-6-4">工单记录</t-menu-item>
            <t-menu-item value="2-6-5">公告记录</t-menu-item>
        </t-submenu>
      </t-menu-group>

      <t-menu-group title="设置">
        <t-submenu title="系统设置" value="3-1">
          <template #icon>
            <SettingIcon />
          </template>
            <t-menu-item value="3-1-1" to="/admin/myself">个人中心</t-menu-item>
            <t-menu-item value="3-1-2" to="/admin/pay">支付设置</t-menu-item>
            <t-menu-item value="3-1-3" to="/admin/copyright">版权设置</t-menu-item>
            <t-menu-item value="3-1-4" to="/admin/email">邮件设置</t-menu-item>
        </t-submenu>
      </t-menu-group>

      <t-menu-group title="关于">
        <t-submenu title="关于系统" value="4-1">
          <template #icon>
            <LaptopIcon />
          </template>
            <t-menu-item value="4-1-1">功能介绍</t-menu-item>
            <t-menu-item value="4-1-2">技术栈</t-menu-item>
            <t-menu-item value="4-1-3">版权声明</t-menu-item>
            <t-menu-item value="4-1-4">更新日志</t-menu-item>
        </t-submenu>

        <t-submenu title="关于作者" value="5-1">
          <template #icon>
            <UserTalkIcon />
          </template>
            <t-menu-item value="5-1-1">作者介绍</t-menu-item>
        </t-submenu>
      </t-menu-group>

    </div>


  </t-menu>
</template>

<script setup lang="ts">
import logo_expanded from "@/assets/images/logo_dark.svg"
import lo_collapsed from "@/assets/images/ico.svg"
import { useResponsiveLayoutStore } from "@/store/responsiveLayout"
import {
  ChartComboIcon,
  ChatPollIcon,
  ClearIcon,
  Dashboard1Icon,
  LaptopIcon,
  SettingIcon,
  StickyNoteIcon,
  UsergroupIcon,
  UserTalkIcon,
  WalletIcon
} from "tdesign-icons-vue-next"


const store = useResponsiveLayoutStore()
</script>

<style lang="less" scoped>
.container {
  .logo_container {
    display: flex;
    justify-content: center;
    align-items: center;

    .logo {
      width: 50%;
      cursor: pointer;
    }
  }
}

</style>
